<template>
	<view>
		<!-- 搜索框 -->
		<my-search @searchClick="goToSearch"></my-search>

		<!-- 滚动区域 -->
		<view class="scrollContainer">
			<!-- 左侧一级分类 -->
			<scroll-view class="scrollLeft" scroll-y :style="{ height: scrollHeight + 'px' }">
				<view
					v-for="(item, index) in cateList"
					:key="item.cat_id"
					class="scrollLeftITem"
					@click="firstCateActived(index)"
					:class="index === actived ? 'actived' : ''"
				>
					{{ item.cat_name }}
				</view>
			</scroll-view>
			<!-- 右侧二级分类 -->
			<scroll-view class="scrollRight" scroll-y :scroll-top="scrollTop" :style="{ height: scrollHeight + 'px' }">
				<view v-for="(item, index) in cateList[actived].children" :key="item.cat_id" class="secCateItem">
					<!-- 二级分类标题 -->
					<view class="secCateTitle">- {{ item.cat_name }} -</view>
					<!-- 三级分类 -->
					<view class="thiCateContainer">
						<view
							class="thiCateItem"
							v-for="(item2, index2) in item.children"
							:key="item2.cat_id"
							@click="thirdCateActived(item2.cat_id)"
						>
							<image :src="item2.cat_icon.replace('dev', 'web')"></image> <text>{{ item2.cat_name }}</text>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
// 导入设置购物车tab页的角标混入模块
import badgeMix from '@/mixins/tabbar-badge.js'

export default {
	mixins: [badgeMix],
	data() {
		return {
			scrollHeight: 0,
			cateList: [],
			actived: 0,
			scrollTop: 0
		}
	},

	onLoad() {
		// 获取移动设备可使用高度
		const { windowHeight: res } = uni.getSystemInfoSync()
		// 获取高度后减去搜索框高度50
		this.scrollHeight = res - 50
		// 调用获取左侧一级分类数据请求函数
		this.getCateList()
	},

	methods: {
		// 定义获取左侧一级分类数据请求函数
		async getCateList() {
			const { data } = await uni.$http.get('/api/public/v1/categories')
			// 请求成功进行赋值，否则提示请求失败
			if (data.meta.status === 200) {
				this.cateList = data.message
			} else {
				uni.$showMsg()
			}
		},

		// 定义点击一级分类的事件回调
		firstCateActived(index) {
			// 点击已选中的一级分类，不执行任何操作
			if (index === this.actived) return
			// 将点击项索引赋值给控制选中样式的变量
			this.actived = index
			// 在点击新的一级分类后重置二级区域滚动条
			this.scrollTop = 0.1 - this.scrollTop
		},

		// 定义三级分类点击事件，设置编程式导航
		thirdCateActived(id){
			uni.navigateTo({
				url:'/subGoods/goodslist/goodslist?cid=' + id
			})
		},

		// 监听my-search组件的自定义事件searchClick
		goToSearch() {
			// 使用编程式导航跳转至搜索页
			uni.navigateTo({
				url: '/subGoods/search/search'
			})
		}
	}
}
</script>

<style lang="scss">
.scrollContainer {
	display: flex;

	// 左侧一级分类
	.scrollLeft {
		width: 120px;

		.scrollLeftITem {
			background-color: #f7f7f7;
			line-height: 60px;
			text-align: center;
			font-size: 12px;
			position: relative;

			// 一级分类激活动画初始样式
			&::before {
				position: absolute;
				top: 0;
				left: -3px;
				content: '';
				display: block;
				width: 3px;
				height: 60px;
				background-color: #c00000;
			}

			&::after {
				position: absolute;
				top: 0;
				left: 120px;
				content: '';
				display: block;
				width: 120px;
				height: 60px;
				border-top: 1px solid #c00000;
				border-bottom: 1px solid #c00000;
				box-sizing: border-box;
			}

			// 激活样式
			&.actived {
				color: #c00000;
				background-color: #fff;
				transition: all 0.5s;

				&::before {
					left: 0;
					transition: all 1s;
				}

				&::after {
					left: -120px;
					transition: all 0.5s;
				}
			}
		}
	}

	// 右侧二级分类
	.scrollRight {
		background-color: #fff;

		// 二级分类标题
		.secCateTitle {
			padding: 15px 0;
			font-size: 13px;
			font-weight: bold;
			text-align: center;
		}

		// 右侧三级分类
		.thiCateContainer {
			display: flex;
			flex-wrap: wrap;

			.thiCateItem {
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				width: 33.33%;
				margin-bottom: 10px;

				image {
					width: 60px;
					height: 60px;
				}

				text {
					font-size: 12px;
				}
			}
		}
	}
}
</style>
